<template>
    <div class="mr-root">
        <back-header>{{$route.params.name}}</back-header>
        <loading v-if="showLoading"></loading>
        <div class="content">
            <img :src=list.images alt="" class="img">
            <div class="id">
                <h3>{{list.name}}&#X3000;&#X3000;作者{{list.author}}</h3>
                <p>{{list.categoryLabel}}</p>
                <p>{{list.updateValueLabel}}&#x3000;&#x3000;{{list.updateInfo}}</p>
                <p><b>简介：</b>{{list.introduction}}</p>
                <div class="red">
                    <router-link :to="/Category/+list.id+'/'+list.updateInfo">
                        开始阅读
                    </router-link>
                </div>
            </div>
        </div>
        <h1>相关推荐</h1>
        <div class="flex">
            <div v-for="a in guan" class="guan">
                <router-link :to="/Category/+a.id+'/'+a.updateInfo">
                    <img :src=a.images alt="">
                    <p>{{a.name}}</p>
                    <p>{{a.updateInfo}}</p>
                    <p>{{a.categoryLabel}}</p>
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
    import BackHeader from '../commpoents/BackHeader.vue'
    import Loading from '../commpoents/Loading.vue'
    export default{
        components:{
            BackHeader,Loading
        },
        data(){
            return{
               list:[],
               guan:[],
               showLoading:true
            }
        },
        created(){
            this.one()
             this.axios.get(`https://api.maimengjun.com/index.php?r=v3/cartoonSet/detail&id=${this.$route.params.id}`)
                .then(data=>{
                    this.list= data.data.results
                   setTimeout(() => {
              this.showLoading = false
            }, 300)
                })
                .catch(err=>{
                    console.log(err)
                })
                
        },
        methods:{
            one(){
                this.axios.get(`https://api.maimengjun.com/index.php?r=v3/cartoonSet/relativeList&id=1349&page=1&size=6`)
                .then(data=>{
                    this.guan=data.data.results
                })
                .catch(err=>{
                    console.log(err)
                })
            }
        }
    }
</script>
<style scoped>
    .img {
        width: 40%;
        height: 100%;
        margin-right: 0.2rem;
    }
    
    .content {
        display: flex;
    }
    
    .id {
        width: 58%;
        margin-right: 0.2rem;
    }
    
    .content {
        width: 100%;
        height: auto;
        padding: 0.4rem;
        overflow: hidden;
        box-sizing: border-box;
        margin-top: 0.8rem;
    }
    
    .red {
        width: 4rem;
        height: 1rem;
        background: red;
        color: white;
        border-radius: 0.2rem;
        font-size: 0.4rem;
        text-align: center;
        line-height: 1rem;
    }
    .red a{
        color: white;
    }
    .flex {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0.4rem;
        box-sizing: border-box;
    }
    
    .flex img {
        width: 100%;
        height: 50%;
    }
    
    .guan {
        width: 40%;
        height: auto;
        margin-right: 0.6rem;
    }
    
    .guan p:nth-child(4) {
        color: salmon;
    }
    
    a {
        color: saddlebrown;
    }
</style>